<template>
	<!-- home文章列表 -->
	<view class="item">
		<!-- 文章标题 -->
		<view class="title">
			为成修勾武士沉浸式修炼的第一天
		</view>
		<!-- 文章主体内容区域 左右布局-->
		<view class="content">
			<!-- 左侧文章信息 -->
			<view class="info">
				<!-- 文章摘要 -->
				<view class="abstract">
					那是一个平静的一天，两狗撞在了一起，互相望着对方，就这样，这两条doge陷入了爱情之中，很快的，他们成了亲，生了孩子，可是这个孩子却并不如他们所愿，他是一条特殊的doge，叫cheems，cheems因为长相怪异，在幼儿园里受尽同学的排挤，他们称cheems为怪物，怪胎，都躲得他远远的，回了家，家里也并不是那么美好，父亲和母亲日复一日的吵架，cheems待在床上，无法忍受的哭了出来，到了课上，cheems也因为自己学习能力太差被同学嘲笑，接着，他的父亲在一天去上班的路上时，遭遇了车祸，不幸身亡，cheems看着面前的墓碑，听着身边的冷嘲热讽，再也哭不出来，因为他的眼泪早就哭干了，即使再哭也没有用啊
				</view>
				<!-- data阅读量 -->
				<view class="tips">
					<text class="date">2021-05-06</text>
					<text class="views">200 阅读</text>
				</view>
			</view>
			<!-- 右侧文章封面 -->
			<view class="cover">
				<image class="img"
					src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1851283359,3457678391&fm=26&gp=0.jpg">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.item {
		padding: 30rpx;
		margin-top: 30rpx;
		background-color: #FFF;

		// 文章标题
		.title {
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #F5F5F5;
			@include conent-title(32rpx, 700)
		}

		// 文章内容左右布局
		.content {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			// 左侧信息
			.info {
				width: calc(100% - 160rpx);
				
				// 文章描述
				.abstract {
					text-indent: 2em;
					color: $bsin-abstract;
					line-height: 38rpx;
					@include text-ellipsis(3);
				}

				.tips {
					display: flex;
					justify-content: space-between;
					margin-top: 14rpx;

					.date {
						color: $bsin-color-data;
					}

					.views {
						color: $bsin-abstract;
					}
				}
			}

			// 右侧封面
			.cover {
				width: 140rpx;
				height: 140rpx;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
